<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>seo搜索引擎优化</title>
  </head>
  <style>
    body {
      margin: 0;
      padding-top: 20px;
      padding-left: 20px;
    }
    #input-box {
      position: absolute;
      top: 10px;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
      width: 50px;
      border-radius: 24px;
      background-color: #1a70d3;
      /* animation: moveAnimend 1s ease-in-out 0s 1 paused forwards; */
      /* animation-play-state: paused; */
    }
    #input-box2 {
      position: absolute;
      top: 10px;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
      width: 50px;
      border-radius: 24px;
      background-color: #1a70d3;
      animation: moveAnim 1s ease-in-out 0s 1 normal forwards;
      /* animation-play-state: paused; */
    }
    #input-box3 {
      position: absolute;
      top: 10px;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
      width: 50px;
      border-radius: 24px;
      background-color: #1a70d3;
      animation: moveAnimend 1s ease-in-out 0s 1 normal forwards;
      /* animation-play-state: paused; */
    }
    #input {
      width: 0px;
      padding-left: 15px;
      height: 30px;
      background: #1285e0;
      border-radius: 18px;
      border: 0;
      outline: 0;
      /* animation: widthAnimend 1s ease-in-out 0s 1 paused forwards; */
    }
    #input3 {
      width: 200px;
      padding-left: 15px;
      height: 30px;
      background: #1285e0;
      border-radius: 18px;
      border: 0;
      outline: 0;
      animation: widthAnimend 1s ease-in-out 0s 1 normal forwards;
    }
    .yuan {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 30px;
      height: 30px;
      background: #3996e2;
      border-radius: 18px;
      border: 0;
    }
    .inputzhankai {
      width: 100px;
      padding-left: 15px;
      height: 30px;
      background: #0c4f9c;
      border-radius: 18px;
      border: 0;
      outline: 0;
    }
    @keyframes moveAnim {
      0% {
        transform: translate(0, 0);
      }

      100% {
        transform: translate(200px, 0);
      }
    }

    @keyframes widthAnim {
      0% {
        width: 0;
      }

      100% {
        width: 200px;
      }
    }
    @keyframes moveAnimend {
      0% {
        transform: translate(200px, 0);
      }

      100% {
        transform: translate(0, 0);
      }
    }

    @keyframes widthAnimend {
      0% {
        width: 200px;
      }

      100% {
        width: 0;
      }
    }

    .input-box {
      /*{ */
      animation-play-state: running;
      /* } */
    }
    #input2 {
      width: 200px;
      padding-left: 15px;
      height: 30px;
      background: #1285e0;
      border-radius: 18px;
      border: 0;
      outline: 0;
      animation: widthAnim 1s ease-in-out 0s 1 normal forwards;
    }
  </style>
  <body>
    <!-- <h2>要索引擎优化(英语: search engine optimization,缩写为SEO) 是通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式。</h2> -->
    
    <div id="input-box">
      <div class="yuan"><img src="./images/sousuo.png" alt="" /></div>
    </div>
    <input
      id="input"
      type="text"
      placeholder="身份证号搜索"
    />
    <script>
      let isright = 1;
        
      let divbox = document.getElementById("input-box");
      let inputbox = document.getElementById("input");
      console.log("====================================");
      console.log(divbox);
      console.log("====================================");

      divbox.addEventListener("click", function(){
        if(isright == 1){
            isright = 2
        }else if(isright == 2){
            isright =3
        }else{
            isright =2
        }
        console.log(isright);
        divbox.id = isright==1 ?'input-box': isright==2 ?'input-box2': 'input-box3'
        inputbox.id = isright==1 ?'input': isright==2 ?'input2': 'input3'
    }, true);
    </script>
  </body>
</html>
